<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <p>address: {{ address }}</p>
  <p>sex: {{ sex }}</p>
</template>
<script>
import { reactive, ref, toRef, toRefs } from 'vue'
// 需求：把对象中的所有数据都在模板中使用
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    /* const name = toRef(obj, 'name')
    const age = toRef(obj, 'age')
    const address = toRef(obj, 'address')
    const sex = toRef(obj, 'sex') */
    /* const { name, age, address, sex } = toRefs(obj)
    return { name, age, address, sex } */
    // 最佳实现，和上面两行等价
    return {
      ...toRefs(obj),
    }
  },
}
</script>
